// 综管领导首页
<template>
  <div class="box">
    <el-row :gutter="20" v-loading="loading">
      <!-- 待办工作 -->
      <el-col :span="12" :offset="0">
        <el-card class="box-card">
          <div slot="header" class="header-container">
            <span>待办工作</span>
            <div class="header-actions">
              <el-tooltip content="刷新数据" placement="top">
                <svg-icon class="action-icon" icon-class="flushed" @click="TodoTasks"></svg-icon>
              </el-tooltip>

              <el-tooltip content="更多数据" placement="top">
                <svg-icon class="action-icon" icon-class="more"></svg-icon>
              </el-tooltip>
            </div>
          </div>
          <div>
            <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%" height="200">
              <el-table-column prop="title" label="标题">
                <template slot-scope="scope">
                  <el-link type="success" @click="ToDo(scope.row)">{{ scope.row.title }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="tjdate" align="center" label="日期" width="180"> </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <!-- 最新进展 -->
      <el-col :span="12" :offset="0">
        <el-card class="box-card">
          <div slot="header" class="header-container">
            <span>最新进展</span>
            <div class="header-actions">
              <el-tooltip content="刷新数据" placement="top">
                <svg-icon class="action-icon" icon-class="flushed" @click="Department"></svg-icon>
              </el-tooltip>

              <el-tooltip content="更多数据" placement="top">
                <svg-icon class="action-icon" icon-class="more" @click="More('Dept')"></svg-icon>
              </el-tooltip>
            </div>
          </div>
          <div>
            <el-table v-loading="loadingDept" :data="tableData1" stripe style="width: 100%" border height="200">
              <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
              <el-table-column prop="proname" label="项目名称"> </el-table-column>
              <el-table-column prop="keytask" label="重点任务">
                <template slot-scope="scope">
                  <el-link type="success" @click="Latest(scope.row)">{{ scope.row.keytask }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="comper" label="平均完成率" width="150">
                <template slot-scope="scope">
                  <el-progress class="showProgressColor" :percentage="scope.row.comper"></el-progress>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <!-- 即将到期任务 -->
      <el-col :span="24" :offset="0">
        <el-card class="box-card">
          <div slot="header" class="header-container">
            <span>即将到期任务</span>
            <div class="header-actions">
              <el-tooltip content="刷新数据" placement="top">
                <svg-icon class="action-icon" icon-class="flushed" @click="AboutExpire"></svg-icon>
              </el-tooltip>

              <el-tooltip content="更多数据" placement="top">
                <svg-icon class="action-icon" icon-class="more" @click="More('AboutE')"></svg-icon>
              </el-tooltip>
            </div>
          </div>
          <div>
            <el-table v-loading="loadingAboutE" :data="tableData2" stripe style="width: 100%" border height="200">
              <el-table-column prop="proname" label="项目名称"> </el-table-column>
              <el-table-column prop="keytask" label="重点任务">
                <template slot-scope="scope">
                  <el-link type="success" @click="onClickTwo(scope.row)">{{ scope.row.keytask }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="expdate" label="截至日期" width="200">
                <template slot-scope="scope">
                  <div v-html="scope.row.expdate"></div>
                </template>
              </el-table-column>

              <el-table-column prop="expday" label="剩余天数" width="180">
                <template slot-scope="scope">
                  <el-tag type="warning" disable-transitions>{{ scope.row.expday }}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <!-- 已超期任务 -->
      <el-col :span="24" :offset="0">
        <el-card class="box-card">
          <div slot="header" class="header-container">
            <span>已超期任务</span>
            <div class="header-actions">
              <el-tooltip content="刷新数据" placement="top">
                <svg-icon class="action-icon" icon-class="flushed" @click="Overdue"></svg-icon>
              </el-tooltip>

              <el-tooltip content="更多数据" placement="top">
                <svg-icon class="action-icon" icon-class="more" @click="More('Overdue')"></svg-icon>
              </el-tooltip>
            </div>
          </div>
          <div>
            <el-table v-loading="loadingOverdue" :data="tableData3" stripe style="width: 100%" height="200">
              <el-table-column prop="proname" label="项目名称"> </el-table-column>
              <el-table-column prop="keytask" label="重点任务">
                <template slot-scope="scope">
                  <el-link type="success" @click="onClickThree(scope.row)">{{ scope.row.keytask }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="overdate" label="截至日期" width="200">
                <template slot-scope="scope">
                  <div v-html="scope.row.overdate"></div>
                </template>
              </el-table-column>
              <el-table-column prop="overdpname" label="责任人" width="180">
                <template slot-scope="scope">
                  <div v-html="scope.row.overdpname"></div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" :offset="0">
        <el-card>
          <div ref="echart1" id="echart1" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-card>
          <div ref="echart2" id="echart2" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>
    <MessageReminder></MessageReminder>
  </div>
</template>

<script>
import { QueryPageList } from '@/api/Approval/index'
import { QueryPageList as taskQueryPageList } from '@/api/task/index'

export default {
  name: 'DepLeaderHome',
  data() {
    return {
      queryFormAboutE: {
        pagenum: 1,
        pagesize: 5,
        expday1: 0,
        expday2: 30,
        orgid: this.$store.getters.userInfo.orgid,
        userid: this.$store.getters.userInfo.id,
        valid: 5
      },
      queryFormOverdue: {
        pagenum: 1,
        pagesize: 5,
        overtype: '是',
        orgid: this.$store.getters.userInfo.orgid,
        userid: this.$store.getters.userInfo.id,
        valid: 5
      },
      queryFormDept: {
        pagenum: 1,
        pagesize: 5,
        orgid: this.$store.getters.userInfo.orgid,
        userid: this.$store.getters.userInfo.id
      },
      loadingDept: false,
      loadingOverdue: false,
      loadingAboutE: false,
      loading: false,

      tableData: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      echart1: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      },
      echart2: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '70%'],
            // adjust the start and end angle
            startAngle: 180,
            endAngle: 360,
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      }
    }
  },

  watch: {
    $route: {
      immediate: true,
      handler(newId) {
        if (newId.path == '/Fourth/DepLeaderHome') {
          this.onSearch()
        }
      }
    }
  },
  created() {
    // this.onSearch()
  },
  mounted() {
    this.onChart1()
    this.onChart2()
  },
  methods: {
    onSearch() {
      this.TodoTasks()
      this.AboutExpire()
      this.Overdue()
      this.Department()
    },
    // 待办
    async TodoTasks() {
      this.loading = true
      const params = {
        checkuserid: this.$store.getters.userInfo.id,
        checktype: 0
      }
      const { content } = await QueryPageList(params)
      this.tableData = content.list
      this.loading = false
    },

    async Department() {
      this.loadingDept = true
      const { content } = await taskQueryPageList(this.queryFormDept)
      console.log('content.list.', content.list)
      this.tableData1 = content.list
      this.loadingDept = false
    },
    // 即将到期任务
    async AboutExpire() {
      this.loadingAboutE = true
      const { content } = await taskQueryPageList(this.queryFormAboutE)
      content.list.forEach(item => {
        if (item.enddatearr != null) {
          item.enddatearr = item.enddatearr.replace(/\\n/g, '<br/>')
          item.enddatearr = item.enddatearr.replace(/\n/g, '<br/>')
        }
        if (item.workdpnamearr != null) {
          item.workdpnamearr = item.workdpnamearr.replace(/\\n/g, '<br/>')
          item.workdpnamearr = item.workdpnamearr.replace(/\n/g, '<br/>')
        }
      })
      this.tableData2 = content.list
      this.loadingAboutE = false
    },

    // 已经超期任务
    async Overdue() {
      this.loadingOverdue = true
      const { content } = await taskQueryPageList(this.queryFormOverdue)
      content.list.forEach(item => {
        if (item.enddatearr != null) {
          item.enddatearr = item.enddatearr.replace(/\\n/g, '<br/>')
          item.enddatearr = item.enddatearr.replace(/\n/g, '<br/>')
        }
      })
      this.tableData3 = content.list
      this.loadingOverdue = false
    },

    // 更多
    More(data) {
      console.log(data)
      if (data == 'Superv') {
        this.$router.push('/Fourth/ProjectEstablishment/ProjectEstablishment')
      } else if (data == 'AboutE') {
        this.$router.push('/Fourth/Tasklist/Tasklist?expday1=0&expday2=30')
      } else if (data == 'Overdue') {
        this.$router.push('/Fourth/Tasklist/Tasklist?overtype=是')
      } else if (data == 'Dept') {
        this.$router.push('/Fourth/Tasklist/Tasklist')
      }
    },

    // 待办链接
    ToDo(row) {
      this.$router.push(
        '/Fourth/EmployeeHome/type1?id=' + row.documentid + '&title=' + row.title + '&historyid=' + row.id
      )
    },
    //最新进展
    Latest(row) {
      console.log(row)
      this.$router.push('/Fourth/Tasklist/TasklistAddC?id=' + row.id + '&title=' + row.proname + '&proid=' + row.proid)
    },

    onClickTwo(row) {
      console.log(row)
      this.$router.push('/Fourth/Tasklist/TasklistAddC?id=' + row.id + '&title=' + row.proname + '&proid=' + row.proid)
    },

    onClickThree(row) {
      console.log(row)
      this.$router.push('/Fourth/Tasklist/TasklistAddC?id=' + row.id + '&title=' + row.proname + '&proid=' + row.proid)
    },

    onChart1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('echart1'))
      // 绘制图表
      myChart.setOption(this.echart1)
    },
    onChart2() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('echart2'))
      // 绘制图表
      myChart.setOption(this.echart2)
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
}
.el-card {
  margin-bottom: 20px;
  background-color: transparent;
}

.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

#todo-col {
  padding: 0 20px 20px 0;
}
#Fill-col {
  padding: 10px 20px 0 0;
}
#todo-task {
  padding: 0 20px 20px 0;
}
#Fill-Echart {
  padding: 10px 20px 0 0;
}

.task-card {
  overflow: auto;
  height: 310px;
}
.task-div {
  padding-bottom: 15px;
}
.showProgressColor >>> .el-progress-bar__inner {
  background: linear-gradient(to right, blue, pink);
}
.box >>> .el-link {
  border-bottom: 1px solid #13ce66;
}
.red {
  background: lightyellow;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 12px; /* 图标间距 */
}

.action-icon {
  font-size: 20px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.action-icon:hover {
  color: #1890ff; /* 悬停效果 */
}
</style>
